<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>2.Vue的生命周期</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器-->
    <div id="demo">
      <h1>当前的n值是：{{n}}</h1>
      <button id="btn" @click="add">点我n+1</button>
      <button @click="goDie">vm自杀</button>
    </div>

    <script type="text/javascript">
      const vm = new Vue({
        el:'#demo',
        data:{
          n:1
        },
        /* template:`
          <div>
            <h1>当前的n值是：{{n}}</h1>
            <button id="btn" @click="add">点我n+1</button>
          </div>`, */
        methods:{
          add(){
            console.log('add执行了')
            this.n+=1
          },
          goDie(){
            // vm销毁
            this.$destroy()
          }
        },
        watch:{
          n(value){
            console.log('n变化了',value)
          }
        },
        // 数据代理、数据劫持创建之前
        beforeCreate(){
          console.log('beforeCreate')
          this.x = 89
        },
        // 数据代理、数据劫持创建完毕
        created(){
          console.log('created')
        },
        // 挂载（真实DOM放入页面）之前
        beforeMount(){
          console.log('beforeMount',this.$el)
          // const btn = document.getElementById('btn')
          // btn.innerText = '哈哈哈嘻嘻拉拉'
        },
        // 挂载（真实DOM放入页面）完毕
        mounted(){
          console.log('mounted',this.$el)
        },
        // 更新之前
        beforeUpdate(){
          console.log('beforeUpdate')
        },
        // 更新完毕
        updated(){
          console.log('updated',this)
        },
        // vm销毁之前
        beforeDestroy(){
          console.log('beforeDestroy',this.n,this.add)
          this.add()
        },
        destroyed(){
          console.log('destroyed',this.n,this.add)
        }
      })
    </script>
  </body>
</html>